<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" label-width="100px" inline>
            <el-form-item label="题库分类：">
              <el-select v-model="tableFrom.cid" clearable class="selWidth" placeholder="请选择分类" @change="handerSearch">
                <el-option v-for="item in categoryTreeData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键词：">
              <el-input v-model="tableFrom.keywords" placeholder="请输入关键词" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" @click="handerSearch" size="small" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <router-link :to="{ path: '/course/daycreat' }">
          <el-button size="small" type="primary" class="mr10" v-hasPermi="['admin:article:save']">添加日日练</el-button>
        </router-link>
      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" ref="multipleTable"
        :header-cell-style=" {fontWeight:'bold'}">
        <el-table-column prop="id" label="编号" min-width="50" />
        <el-table-column prop="title" label="标题" min-width="150" />
        <el-table-column prop="startDate" label="生效日期" min-width="150" />
        <el-table-column prop="endDate" label="结束时间" min-width="150" />
        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="record(scope.row)" class="mr10">已关联用户</el-button>
            <el-button type="text" size="small" @click="sendUser(scope.row.id)" class="mr10">添加关联</el-button>
            <router-link :to="{ path: '/course/daycreat/' +  scope.row.id}">
              <el-button type="text" size="small"  class="mr10">修改</el-button>
            </router-link>
            <el-button type="text" size="small" @click="deletekLook(scope.row.id)" class="mr10">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block mb20">
        <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <sendRecords ref="sendRecords" v-if="sendRecordsDialog"></sendRecords>
    <userChoose ref="choose" v-if="chooseUser"></userChoose>
  </div>
</template>

<script>
  import {
    bargainListApi,
    bargainOrderPinkApi,
    bargainDeleteApi
  } from '@/api/marketing'
  import bargainAdd from './bargainAdd';
   import userChoose from './userChoose';
  import sendRecords from './sendRecords';
  import * as categoryApi from "@/api/categoryApi.js";
  export default {
    name: "index",
    components: {
      bargainAdd, userChoose,sendRecords
    },
    data() {
      return {
        categoryTreeData: [],
        tableData: {
          data: [],
          total: 0
        },
        listLoading: false,
        chooseUser: false,
        sendRecordsDialog:false,
        tableFrom: {
          dateLimit: '',
          status: '',
          page: 1,
          limit: 20,
          cid: "",
          keywords: ""
        },
        fromList: this.$constants.fromList,
        timeVal: []
      }
    },
    mounted() {
      this.getList()
      this.handlerGetTreeList();
    },
    methods: {
      //日日练推送记录
      record(row) {
        this.sendRecordsDialog=true
          this.$nextTick(()=>{
          this.$refs.sendRecords.modalPicTap();
          this.$refs.sendRecords.dayId=row.id
        })
      },

      //推送至人员
      sendUser(id){
         this.$router.push(`/course/createuser/${id}`);
      },

      //删除日日练
      deletekLook(id){
        bargainDeleteApi({id: id}).then(() => {
          this.$message.success('删除成功')
          this.getList();
        })
      },

      handerSearch() {
        this.getList();
      },

      handlerGetTreeList() {
        categoryApi.listCategroy({
          type: 3,
          status: ""
        }).then((data) => {
          this.categoryTreeData = data.list;
          localStorage.setItem("articleClass", JSON.stringify(data.list));
        });
      },

      selectChange(tab) {
        this.tableFrom.dateLimit = tab
        this.tableFrom.page = 1
        this.timeVal = []
        this.getList()
      },
      // 具体日期
      onchangeTime(e) {
        this.timeVal = e
        this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
        this.tableFrom.page = 1
        this.getList()
      },
      // 列表
      getList(num) {
        this.listLoading = true;
        this.tableFrom.page = num ? num : this.tableFrom.page;
        bargainListApi(this.tableFrom).then(res => {
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .el-table__body {
    width: 100%;
    table-layout: fixed !important;
  }

  .text_overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
  }

  .pup_card {
    width: 200px;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 16px;
  }
</style>
